<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入巡检计划名称" v-model="planName" size="small" style="width: 180px" class="mRight10" clearable> </el-input>
          <el-button type="primary" size="small" @click="queryForPage(1)"> 查询 </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增计划</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="660px"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.itemList"
                :header-cell-style="{
                  color: '#999',
                  height: '44px',
                }"
                style="width: 100%; border: 1px solid #ebeef5; border-bottom: 0"
                class="insp-table-expand"
              >
                <el-table-column label="桥梁名称" prop="ownName" show-overflow-tooltip></el-table-column>
                <el-table-column label="巡检项名称" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column label="巡检规范" property="inspStandard" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span> {{ inspStandardText(scope.row.inspStandard) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡检人员" property="itemUserList" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span> {{ inspPersonText(scope.row.itemUserList) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="planName" label="计划名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="inspType" label="巡检类型" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.inspType)]"> {{ inspTypeText(scope.row.inspType) }} </label>
            </template>
          </el-table-column>
          <el-table-column property="inspFrequency" label="巡检频次" show-overflow-tooltip>
            <template slot-scope="scope">
              <span> {{ inspFrequencyText(scope.row.inspFrequency) }}/次</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="creater" label="创建人" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="查看">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)"> </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handelDelete(scope.row.id)"> </el-button>
              </el-tooltip>
              <el-tooltip content="新增任务">
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddTask(scope.row.id)"> </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!--新增/编辑计划-->
    <AddInspPlan ref="addInspPlanChild" @closeAddInspPlan="handleClose"></AddInspPlan>

    <!--新增计划任务/快速任务--->
    <AddInspTask ref="addInspTaskChild" :createType="3" @closeAddInspTask="() => {}"></AddInspTask>
  </div>
</template>
<script>
import AddInspPlan from './components/addInspPlan'
import AddInspTask from './components/addInspTask'
export default {
  data() {
    return {
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      tableData: [],
      planName: '',
      inspType: '',
      planStatus: '',
      detailDialogVisible: false,
    }
  },
  components: {
    AddInspPlan,
    AddInspTask,
  },
  created() {},
  mounted() {
    this.queryForPage()
  },
  methods: {
    handleAdd() {
      this.$refs.addInspPlanChild.add()
    },
    handelDelete(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.insp.deletePlan(val).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
                icon: 'success',
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage)
            } else {
              this.$vs.notify({ 
                text: '删除失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消删除',
            color: 'primary',
          })
        })
    },
    handleAddTask(val) {
      this.$refs.addInspTaskChild.add(val)
    },
    handelEdit(val) {
      this.$refs.addInspPlanChild.edit(val)
    },
    queryForPage(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        data: {
          name: this.planName,
        },
      }
      this.$api.insp.queryPlanPage(_params).then((response) => {
        if (response.data.success) {
          this.tableData = response.data.data.map((item, index) => {
            return {
              id: item.id,
              planName: item.name,
              inspType: item.inspType,
              createTime: item.dt,
              creater: item.createUserName,
              itemList: item.itemList,
              inspFrequency: item.type,
            }
          })

          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handleClose() {
      this.queryForPage(1)
    },
    inspPersonText(list) {
      let _text = ''
      list.forEach((item, index) => {
        if (!index) {
          _text += item.userName
        } else {
          _text += `、${item.userName}`
        }
      })
      return _text
    },
    inspStandardText(type) {
      switch (type) {
        case 0:
          return '城市桥梁'
        case 1:
          return '道路桥梁'
      }
    },
    inspFrequencyText(type) {
      switch (type) {
        case 0:
          return '月'
        case 1:
          return '日'
        case 3:
          return '周'
      }
    },
    inspTypeClass(type) {
      switch (type) {
        case 0:
          return 'inspTypeA'
        case 1:
          return 'inspTypeB'
        case 2:
          return 'inspTypeC'
      }
    },
    inspTypeText(type) {
      switch (type) {
        case 0:
          return '日常巡检'
        case 1:
          return '定期巡检'
        case 2:
          return '特殊巡检'
      }
    },
  },
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/baseColor.scss';
@import './insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f1f5fc;
}

/deep/.el-table__expanded-cell {
  padding: 20px !important;
}

/deep/.el-button--mini.insp-task-addBtn {
  padding: 6px;
  font-size: 18px;
  font-weight: bolder;
}
</style>
